<template>
    <div id="home" :style="{paddingBottom:`${padding}vw`}">
        <Location />
        <Banner/>
        <HotSale :goodsList = 'goodsList'/>
        <GoodsList :goodsList = 'goodsList'/>
        <Car :shoppingCarList = 'shoppingCarList' @control='(isOpen)=>{this.isOpen = isOpen}'/>
         <Tip v-show="tips.isTips" :tipsText="tips.tipText"/>
         
    </div>
</template>

<script>
    import Banner from '@/views/Home/banner'
    import HotSale from '@/views/Home/HotSale'
    import GoodsList from '@/views/Home/GoodsList'
    import {mapState} from 'vuex'
    import Location from '@/views/Home/Location'
    
    
    export default {
        name:"Home-View",
        components:{Banner, HotSale, GoodsList, Location},
        data(){
            return {
                isOpen:false
            }
        },
        methods: {
            // 获取商品数据
            getGoodsDate(){
                this.$store.dispatch('Home/getGoodsDate')
            },
            // 获取购物车数据
            searchGoodsIntheCar(){
                this.$store.dispatch('Home/searchGoodsIntheCar')
            }
        },
        created() {
            this.getGoodsDate()
            this.searchGoodsIntheCar()
        },
        computed:{
            ...mapState('Home',['goodsList','tips','shoppingCarList']),
            padding(){
                if(this.isOpen){
                    return 93
                }else{
                    return 24
                }
            }
        },
        mounted() {
        },
    }
</script>

<style scoped lang="less">
    #home{
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        padding-bottom: 24vw;
    }
</style>
热销